
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { Modal, List, Button } from 'antd'
import { hide } from '../../redux/actionCreator/TabbarActionCreator'
import { getTempList, deleteTempById, getLuckySheetConf } from '../../redux/actionCreator/lineLossTempActionCreater'
function TempList (props) {

  // 将需要的公共状态解构出来使用
  let {
    isShow,
    hide,
    getTempList,
    tempList,
    viewId,
    stateId,
    deleteTempById,
    getLuckySheetConf,
    saveCommit } = props

  // 挂载时执行
  useEffect(() => {

    if (tempList.length === 0) {
      getTempList()
    } else {

    }
  }, [tempList, getTempList, viewId, stateId, deleteTempById, saveCommit])

  return (
    <div>
      <Modal
        bodyStyle={{ height: '400px' }}
        width='700px'
        title="模板列表"
        visible={isShow}
        onOk={hide}
        onCancel={hide}>
        <List style={{ height: '100%', overflowY: "auto" }}
          itemLayout="horizontal"
          dataSource={tempList}
          renderItem={item => (
            <List.Item>
              <List.Item.Meta
                title={'于' + item.insertDate + '保存'}
                description={item.commitMsg}
              />
              <div>

                <Button
                  className='tempListBtn'
                  type="primary"
                  ghost
                  disabled={item.id === viewId}
                  onClick={() => {
                    getLuckySheetConf(item.id)
                  }}
                >查看</Button>

                <Button
                  className='tempListBtn'
                  type="primary"
                  danger
                  ghost
                  disabled={item.id === stateId || item.id === viewId}
                  onClick={() => {
                    deleteTempById(item.id)
                  }
                  }
                >删除</Button>
              </div>
            </List.Item>
          )}
        />
      </Modal>
    </div >
  )
}

//需要用到的redux状态
const mapStateToProps = (state) => {
  return {
    isShow: state.TabbarReducer.visible,
    tempList: state.LineLossTempReducer.tempList,
    viewId: state.LineLossTempReducer.viewId,
    stateId: state.LineLossTempReducer.stateId,
    saveCommit: state.LineLossTempReducer.saveCommit
  }
}

// 修改redux状态的方法
const mapDispatchToProps = {
  hide,
  getTempList,
  deleteTempById,
  getLuckySheetConf
}
export default connect(mapStateToProps, mapDispatchToProps)(TempList)
